import React from 'react';
import { Mentions as AntdMentions } from 'antd';
import type { MentionProps as AntdMentionProps } from 'antd';
import { createStyles } from 'antd-style';

export type { MentionProps} from 'antd';

export interface MentionsProps extends AntdMentionProps {
  /**
   * @description 自定义样式类名
   */
  customClassName?: string;
}

const useStyles = createStyles(({ token, css }) => ({
  mentions: css`
    border-radius: ${token.borderRadius}px;
  `,
}));

const MentionsComponent: React.FC<MentionsProps> = ({ customClassName, className, ...restProps }) => {
  const { styles, cx } = useStyles();
  
  const mentionsClassName = cx(
    className,
    customClassName,
    styles.mentions
  );

  return <AntdMentions className={mentionsClassName} {...restProps} />;
};

// 直接复制所有属性，避免类型推断问题
const Mentions = Object.assign(MentionsComponent, {
  getMentions: (AntdMentions as any).getMentions,
  _InternalPanelDoNotUseOrYouWillBeFired: (AntdMentions as any)._InternalPanelDoNotUseOrYouWillBeFired,
  Option: (AntdMentions as any).Option,
});

export { Mentions };
export default Mentions;

